{% extends '../layout/basic.html' %}
{% load static %}

{% block title %} 用户注册2 {% endblock %}
{% block styles %}
    <link rel="stylesheet" href="{% static 'css/account.css' %}">
{% endblock %}
{% block content %}
<div class="container">
    <div class="account">
        <div class="title"><h1>用户注册</h1></div>
        <form id="regForm" method="POST"  novalidate>
            {% csrf_token %}
            {% for field in form %}
                {% if field.name == 'code' %}
                    <div class="form-group">
                        <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                        <div class="clearfix">
                            <div class="col-md-6" style="padding-left: 0"> {{ field }}
                            <span class="error-msg"></span>
                            </div>

                            <div class="col-md-6"><input type="button" class="btn btn-default" value="获取验证码" id="btnsms"></div>
                        </div>
                    </div>
                {% else %}
                    <div class="form-group">
                        <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                        {{ field }}
                        <span class="error-msg"></span>
                    </div>
                {% endif %}
            {% endfor %}
            <input type="button" id="btnSubmit" value="提交" class="btn btn-primary">
        </form>
    </div>
</div>
{% endblock %}
{% block scripts %}
    <script>//页面加载完成之后执行函数
    $(function () {
        sendSms();
        bindClickSubmit();
    });

    function bindClickSubmit() {
    $('#btnSubmit').click(function () {
        $('.error-msg').empty();
        // 收集表单中的数据（找到每一个字段）$('#regForm').serialize()
        // 数据ajax发送到后台
        $.ajax({
            url: "{% url 'register' %}",
            type: "POST",
            data: $('#regForm').serialize(), // 所有字段数据 + csrf token
            dataType: "JSON",
            success: function (res) {
                console.log(res);
                if ( res.status){
                    alert('注册成功');
                    {#window.location.href = "{% url 'login' %}";#}
                }else {
                    $.each(res.error, function(k, v) {
                        $('#id_' + k).next().text(v[0]);
                    });
                }

            }
        })
    })
}




    function sendSms() {
        $('#btnsms').click(function () {
            $('.error-msg').empty();
            var phone = $('#id_phone').val();
            alert(phone);
            //发送ajax请求
            $.ajax({
                url: '{% url "send_sms" %}',
                {#url: '/send/sms/',#}
                type: 'POST',
                dataType: 'JSON',
                data: {
                    'phone': phone,
                    'csrfmiddlewaretoken': '{{ csrf_token }}'
                },
                success: function (data) {
                    if (data.status == 'success') {
                        sendSmsRemind(60);
                        console.log("发送成功，开始倒计时");
                    } else {
                        console.log(data);
                        $.each(data.error, function (key, val) {
                            $('#id_' + key).next().text(val[0]);
                        });
                    }
                }
            });
        });
    };

    /*
     倒计时
    */
    function sendSmsRemind() {
        var $btn = $('#btnsms');
        var time = 120;
        var remind = setInterval(function () {
            time = time - 1;
            $btn.prop('disabled', true);
            $btn.val(time + '秒后重新发送');
            if (time < 1) {
                clearInterval(sendSmsRemind);
                $btn.val('获取验证码').prop('disabled', false);
            }
        }, 1000);
    }
    </script>

{% endblock %}